<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跟打器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>跟打器</h1>
        <div id="stats">
            <div class="stat-item">
                <p>时间: <span id="time">0</span> 秒</p>
            </div>
            <div class="stat-item">
                <p>速度: <span id="wpm">0</span> 字/分钟</p>
            </div>
            <div class="stat-item">
                <p>准确率: <span id="accuracy">0</span>%</p>
            </div>
            <div class="stat-item">
                <p>击键数: <span id="keystrokes">0</span></p>
            </div>
            <div class="stat-item">
                <p>码长: <span id="codeLength">0</span></p>
            </div>
            <div class="stat-item">
                <p>回改数: <span id="backspaces">0</span></p>
            </div>
            <div class="stat-item">
                <p>错字: <span id="errors">0</span></p>
            </div>
        </div>
        <div id="inputContainer" class="resizable">
            <textarea id="inputText" class="text-area" placeholder="在此粘贴文本...">心的出口</textarea>
            <div class="resize-handle"></div>
        </div>
        <div id="buttonContainer">
            <button id="startButton" class="flat-button">开始</button>
        </div>
        <div id="typingArea" class="resizable" style="display: none;">
            <div id="displayText" class="text-area"></div>
            <textarea id="typingInput" class="text-area" placeholder="开始打字..."></textarea>
            <div class="resize-handle"></div>
        </div>
        <div id="controlButtons" style="display: none;">
            <button id="pauseButton" class="flat-button">暂停</button>
            <button id="stopButton" class="flat-button">停止</button>
        </div>
        <div id="statsTableContainer">
            <table>
                <thead>
                    <tr>
                        <th>时间</th>
                        <th>时间(秒)</th>
                        <th>速度(字/秒)</th>
                        <th>准确率(%)</th>
                        <th>击键数 (次/秒)</th>
                        <th>码长</th>
                        <th>回改数</th>
                        <th>错误</th>
                    </tr>
                </thead>
                <tbody id="statsTableBody">
                    <!-- 动态添加行 -->
                </tbody>
            </table>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
